<template>
	<view class="nav">
		<view  class="bar">
			<uni-icon @click="show()"  class="iconfont icon-bars"></uni-icon>
			<uni-drawer :visible="showUser" mode="left" @close="closeDrawer()">
				<view class="user">
					<view class="user-img">
						<image src="../../static/login/user.jpg" mode=""></image>
					</view>
				</view>
			</uni-drawer>
		</view>
		<view class="main">
			<view class="item">
				<text>我的</text>
			</view>
			<view class="item">
				<text>发现</text>
			</view>
			<view class="item">
				<text>云村</text>
			</view>
		</view>
		<view class="search">
			<uni-icon class="iconfont icon-search"></uni-icon>
		</view>
	</view>
</template>
<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				showUser:false
			}
		},
		methods: {
			show() {
				this.showUser = true
			},
			hide() {
				this.showUser = false
			},
			closeDrawer(){
				this.showUser = false
			}
		}
	}
</script>

<style lang="stylus">
	.nav{
		padding-top 5vh
		padding-left 15px
		padding-right 15px
		padding-bottom 10px
		box-sizing border-box
		width 100%
		display flex
		justify-content space-between
		align-items center
		box-shadow 0 0 2px rgba(0,0,0,0.08)
		.bar{
			
		}
		.main{
			position relative
			display flex
			.item{
				text-align center
				text{
					padding 0 20px
					font-size 15px
					font-weight 300
				}
			}
		}
		.search{
			
		}
		.user{
			padding 40px 15px 0 15px
			&-img{
				width 50px
				height 50px
				overflow hidden
				image{
					width 100%
					height 100%
					border-radius 50%
				}
			}
		}
	}

</style>
